<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title" v-if="title">{{ title }}</div>
      <div class="sub_title" v-if="subTitle">{{ subTitle }}</div>
      <slot name="title"></slot>
    </div>
    <div id="point_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  name: "point_basic",
  data() {
    return {
      chart: {},
    };
  },
  props: {
    // 标题 （可选）
    title: {
      type: String,
      default: "",
    },
    // 副标题 （可选）
    subTitle: {
      type: String,
      default: "",
    },
    // 需要渲染的数据 必传
    dataList: {
      type: Array,
      require: true,
      default: () => [],
    },
    // 是否宽度自适应，设置 auto 自适应 width 值无效 （可选）
    // 默认为 true , 所有如果要固定宽度，autoFit 需要设置为 false
    autoFit: {
      type: Boolean,
      default: true,
    },
    // 图表盒子的宽 px （可选）
    width: {
      type: Number,
      default: 980,
    },
    // 图表盒子的高 px （必传）
    height: {
      type: Number,
      require: true,
      default: 500,
    },
    // 设置图表外侧内边距，（可选）
    // [string]: 'auto'
    // [number]: 10 (上右下左都为10px)
    // [array]: [20, 20, 95, 80] (上：20，右：20，下：95，左：80)。 写法同 css padding
    padding: {
      type: [Number, Array, String],
      default: "auto",
    },
    // 图表是否可见，用于显示和隐藏图表 （可选）
    visible: {
      type: Boolean,
      default: true,
    },
    // 选择图表渲染器，可选择 canvas | svg
    renderer: {
      type: String,
      default: "canvas",
    },
    // 度量（Scale）用于定义数据的类型和展示方式 （可选）
    scale: {
      type: Object,
      default: () => ({}),
    },
    // 配置坐标轴 （可选）
    axis: {
      type: Object,
      default: () => ({}),
    },
    // 配置辅助提示
    tooltip: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    dataList(newValue) {
      this.chart.changeData(newValue);
    },
  },
  mounted() {
    // Step 1: 创建 Chart 对象
    this.chart = new Chart({
      container: "point_basic", // 指定图表容器 ID
      // autoFit 为 true width 属性不起作用
      autoFit: !this.autoFit && this.width ? false : true,
      width: this.width,
      height: this.height,
      padding: this.padding,
      renderer: this.renderer,
      visible: this.visible,
    });
    // 载入数据源，一定要先载入数据
    this.chart.data(this.dataList);

    this.editChartsConfig(this.chart, "scale", this.scale);
    this.editChartsConfig(this.chart, "axis", this.axis);

    this.chart.tooltip(this.tooltip);

    this.chart.interaction("active-region");

    // 创建图形语法，绘制柱状图
    this.chart.point().position("label*value").label("value");
    // 渲染图表
    this.chart.render();
  },
  methods: {
    // 多条件配置 charts 属性通用函数。
    editChartsConfig(chart, type, configObj) {
      if (Object.keys(configObj).length == 0) return;
      for (let prop in configObj) {
        chart[type](prop, configObj[prop]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>